<html>
<head>
    <title>ENTITY EDITOR</title>
    <meta charset="UTF-8">
    <link href="./css/editor.css" rel="stylesheet" media="all">
    <link href="./css/cursors.css" rel="stylesheet" media="all">
    <link href="./css/buttons.css" rel="stylesheet" media="all">
    <!--[if lte IE 7]>
    <link href="./css/editor.ie.css" rel="stylesheet" media="all">
    <![endif]-->
    <link href="./css/jquery-ui.min.css" rel="stylesheet" media="all">
    <link href="./css/jquery.colpick.css" rel="stylesheet" media="all">
    <script type="text/javascript" src="./js/lib/createjs-2013.12.12.min.js"></script>
    <script type="text/javascript" src="./js/lib/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="./js/lib/jquery-ui-1.10.4.custom.min.js"></script>
    <script type="text/javascript" src="./js/lib/jquery.colpick.js"></script>
    <script type="text/javascript" src="./js/lib/jquery.toggleClick.js"></script>
    <script type="text/javascript" src="./js/main.js"></script>
    <script type="text/javascript" src="./js/renderer.js"></script>
    <script type="text/javascript" src="./js/gui.js"></script>
    <script type="text/javascript" src="./js/map.js"></script>
    <script type="text/javascript" src="./js/editor.js"></script>
</head>
<body id="body">
    <div id="pageContainer">
        <canvas id="canvasGame">Your browser is outdated, please update it or download Google Chrome ><a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">here</a>< for the best experience.</canvas>
        <div id="orientations">
            <div id="north">N</div>
            <div id="east">E</div>
            <div id="south">S</div>
            <div id="west">W</div>
        </div>
        <img id="gameBackground" src="./images/blank.png">
        <div id="editorMenu">
            <div class="separator"></div>
            <div id="actionsMenu">
                <div class="menuAction first"><a class="newCollection off add"  data-action="editor:NewCollection" title="New collection"></a></div>
                <div class="menuAction"><a class="newShape off add"  data-action="editor:NewShape" title="New Shape"></a></div>
                <div class="menuAction"><a class="openSave off"  data-action="editor:OpenSave" title="Open save"></a></div>
                <div class="menuAction"><a class="save off"  data-action="editor:Save" title="Save"></a></div>
                <div class="menuAction"><a class="openCollection off"  data-action="editor:OpenCollection" title="Import"></a></div>
                <div class="menuAction"><a class="export off"  data-action="editor:Export" title="Export"></a></div>
            </div>
            <div class="separator"></div>
            <div id="actionsEditor">
                <div class="menuAction"><a class="undo disabled"  data-action="editor:Undo" title="Undo"></a></div>
                <div class="menuAction"><a class="redo disabled"  data-action="editor:Redo" title="Redo"></a></div>
            </div>
            <div class="separator"></div>
            <div id="menuGrid">
                <div class="inputTitle">GRID</div>
                <div class="inputContainer">
                    <div class="label">Display</div>
                    <div class="input switch-outer">
                        <div class="switch-slider" rel="Grid_active" data-action-on="editor:ActiveGrid" data-action-off="editor:DeactiveGrid"></div>
                        <input type="checkbox" id="Grid_active">
                    </div>
                </div>
                <div class="inputContainer range">
                    <div class="label">Scale</div>
                    <div class="input">
                        <input type="range" class="rangeSlide" data-suffix="" data-action-onchange="editor:UpdateGrid" min="0.1" max="2" step="0.1" id="grid_scale" value="0.5">
                        <span class="rangeValue">0.5</span>
                    </div>
                </div>
                <div class="inputContainer">
                    <div class="label">Hook</div>
                    <div class="input switch-outer">
                        <div class="switch-slider" rel="Grid_hook" data-action-on="editor:HookGrid"  data-action-off="editor:DontHookGrid"></div>
                        <input type="checkbox" id="Grid_hook">
                    </div>
                </div>
            </div>
            <div class="separator"></div>
            <div class="menuUtils">
                <div class="menuUtil"><a class="selector on"  data-action="editor:Selector" title="Selector"></a></div>
                <div class="menuUtil"><a class="pointsSelector off"  data-action="editor:PointsSelector" title="Points selector"></a></div>
                <div class="menuUtil"><a class="refresh off disabled"  data-action="editor:RefreshShape" title="Refresh shape"></a></div>
                <div class="menuUtil"><a class="revert off disabled"  data-action="editor:RevertPoints" title="Revert points"></a></div>
            </div>
            <div class="separator"></div>
            <div class="menuUtils">
                <div class="menuUtil"><a class="newGroup off add"  data-action="editor:NewGroup" title="New group"></a></div>
                <div class="menuUtil"><a class="line off"  data-action="editor:Line" title="Line"></a></div>
                <div class="menuUtil"><a class="arc off"  data-action="editor:Arc" title="Arc"></a></div>
                <div class="menuUtil"><a class="bezier off"  data-action="editor:BezierCurv" title="Bezier"></a></div>
            </div>
            <div class="separator"></div>
            <div class="menuUtils">
                <div class="menuUtil"><a class="spot off"  data-action="editor:Spot" title="Spot"></a></div>
                <div class="menuUtil"><a class="circle off"  data-action="editor:Circle" title="Circle"></a></div>
                <div class="menuUtil"><a class="rectangle off"  data-action="editor:Rect" title="Rectangle"></a></div>
                <div class="menuUtil"><a class="ellipse off"  data-action="editor:Ellipse" title="Ellipse"></a></div>
            </div>
            <div class="separator"></div>
            <div id="menuPenNFill">
                <div class="inputTitle">COLORS AND LINES</div>
                <div class="inputContainer colorpicker">
                    <div class="label">Line color</div>
                    <div class="input">
                        #<input type="text" id="Color_line" class="colorPicker" value="000000">
                    </div>
                </div>
                <div class="inputContainer range">
                    <div class="label">Line size</div>
                    <div class="input">
                        <input type="range" class="rangeSlide" data-suffix="px" min="0.5" max="10" step="0.5" id="Size_line" value="1">
                        <span class="rangeValue">1px</span>
                    </div>
                </div>
                <div class="inputContainer select">
                    <div class="label">Line caps</div>
                    <div class="input">
                        <select id="Caps_type">
                            <option value="square" selected="selected">Square</option>
                            <option value="butt">Butt</option>
                            <option value="round">Round</option>
                        </select>
                    </div>
                </div>
                <div class="inputContainer select">
                    <div class="label">Line joints</div>
                    <div class="input">
                        <select id="Joints_type">
                            <option value="round" selected="selected">Round</option>
                            <option value="bevel">Bevel</option>
                            <option value="miter">Miter</option>
                        </select>
                    </div>
                </div>
                <div class="inputContainer colorpicker">
                    <div class="label">Fill color</div>
                    <div class="input">
                        #<input type="text" id="Color_fill" class="colorPicker" value="000000">
                    </div>
                </div>
                <div class="inputContainer select">
                    <div class="label">Plot type</div>
                    <div class="input">
                        <select id="Plot_type">
                            <option value="dot">Dot</option>
                            <option value="cross">Cross</option>
                            <option value="round">Round</option>
                            <option value="circle">circle</option>
                        </select>
                    </div>
                </div>
            </div>

        </div>
        <div id="backEditorMenu"></div>
        <div id="editorLayers">
            <div class="projectTitle">Project</div>
            <div class="separator"></div>
            <div id="projectLayers"></div>
        </div>
        <div id="backEditorLayers"></div>
    </div>
    <div id="htmlPathern">
        <div id="newCollection">
            <div class="inputContainer input">
                <div class="label">Name</div>
                <div class="input">
                    <input type="text" id="newcollection_name">
                </div>
            </div>
            <div class="inputContainer button">
                <button id="newcollection_ok">Créer</button>
            </div>
        </div>
        <div id="newShape">
            <div class="inputContainer input">
                <div class="label">Name</div>
                <div class="input">
                    <input type="text" id="newshape_name">
                </div>
            </div>
            <div class="inputContainer select">
                <div class="label">Format</div>
                <div class="input">
                    <select id="newshape_format">
                        <option value="1">1x1</option>
                        <option value="2">2x2</option>
                        <option value="3">3x3</option>
                        <option value="4">4x4</option>
                        <option value="5">5x5</option>
                        <option value="6">6x6</option>
                        <option value="7">7x7</option>
                        <!--<option value="1/2">1x2</option>-->
                        <!--<option value="2/1">2x1</option>-->
                        <!--<option value="1/3">1x3</option>-->
                        <!--<option value="3/1">3x1</option>-->
                        <!--<option value="2/3">2x3</option>-->
                        <!--<option value="3/2">3x2</option>-->
                        <!--<option value="1/4">1x4</option>-->
                        <!--<option value="4/1">4x1</option>-->
                        <!--<option value="2/4">2x4</option>-->
                        <!--<option value="4/2">4x2</option>-->
                        <!--<option value="3/4">3x4</option>-->
                        <!--<option value="4/3">4x3</option>-->
                        <!--<option value="cross/3">Cross (3x3)</option>-->
                        <!--<option value="cross/4">Cross (4x4)</option>-->
                        <!--<option value="cross/5">Cross (5x5)</option>-->
                        <!--<option value="square/3">Square (3x3)</option>-->
                        <!--<option value="square/4">Square (4x4)</option>-->
                        <!--<option value="square/5">Square (5x5)</option>-->
                    </select>
                </div>
            </div>
            <div class="inputContainer button">
                <button id="newshape_ok">Créer</button>
            </div>
        </div>
        <div id="openSave">
            <div class="inputContainer input">
                <div class="label">File</div>
                <div class="input">
                    <select id="opensave_file">
                        <?php
                        if(file_exists("./saves/.")){
                            $d = opendir("./saves");
                            while (false !== ($f = readdir($d))) {
                                if(preg_match("#\.save$#",$f)){
                                    echo '<option value="'.$f.'">'.str_replace('.save','',$f).'</option>';
                                }
                            }
                        }

                        ?>
                    </select>
                </div>
            </div>
            <div class="inputContainer button">
                <button id="opensave_ok">Ouvrir</button>
            </div>
        </div>
        <div id="collection">
            <div id="collectionName">%name%</div>
            <div class="separator"></div>
            <ul id="shapes" class="clearfix shapes"></ul>
        </div>
        <div id="shapeNoCollection">
            <div id="collectionName">New Shape</div>
            <div class="separator"></div>
            <ul id="shapes" class="clearfix shapes"></ul>
        </div>
        <div id="shape">
            <li class="shapeTitle"><a  data-action="editor:OpenShape:%id%">%name%</a></li>
            <li class="shapeLayers" id="shapeLayers_%id%">
                <ul class="clearfix sides">
                    <li class="menuTitle"><a href="#shapeProperties_%id%" data-action="shape:Properties:%id%">Props</a></li>
                    <li class="menuTitle"><a href="#NLayer_%id%" data-action="editor:getNorth:%id%">N</a></li>
                    <li class="menuTitle"><a href="#ELayer_%id%" data-action="editor:getEast:%id%">E</a></li>
                    <li class="menuTitle"><a href="#SLayer_%id%" data-action="editor:getSouth:%id%">S</a></li>
                    <li class="menuTitle"><a href="#WLayer_%id%" data-action="editor:getWest:%id%">W</a></li>
                </ul>
                <div id="shapeProperties_%id%" class="menuProperties">
                    <div class="inputContainer">
                        <div class="label">Walkable</div>
                        <div class="input switch-outer">
                            <div class="switch-slider" rel="shapeWalkable_%id%" data-action-on="shape:Walkable:1"  data-action-off="shape:Walkable:0"></div>
                            <input type="checkbox" id="shapeWalkable_%id%">
                        </div>
                    </div>
                    <div class="inputContainer">
                        <div class="label">Room</div>
                        <div class="input switch-outer">
                            <div class="switch-slider" rel="shapeWalkable_%id%" data-action-on="shape:Walkable:1"  data-action-off="shape:Walkable:0"></div>
                            <input type="checkbox" id="shapeWalkable_%id%">
                        </div>
                    </div>
                    <div class="inputContainer">
                        <div class="label">Unbreak.</div>
                        <div class="input switch-outer">
                            <div class="switch-slider" rel="shapeUnbreakable_%id%" data-action-on="shape:Unbreakable:1"  data-action-off="shape:Unbreakable:0"></div>
                            <input type="checkbox" id="shapeUnbreakable_%id%">
                        </div>
                    </div>
                    <div class="inputContainer">
                        <div class="label">Life pts.</div>
                        <div class="input">
                            <input type="number" inputmode="numeric" min="0" id="shapeLife_%id%">
                        </div>
                    </div>
                    <div class="inputContainer">
                        <div class="label">Seatable</div>
                        <div class="input switch-outer">
                            <div class="switch-slider" rel="shapeSeatable_%id%" data-action-on="shape:Seatable:1"  data-action-off="shape:Seatable:0"></div>
                            <input type="checkbox" id="shapeSeatable_%id%">
                        </div>
                    </div>
                </div>
                <div id="NLayer_%id%" class="menuProperties">
                    <div class="legend clearfix">
                        <span>Groups</span>
                        <img src="./images/icons/color_fill.png">
                        <img src="./images/icons/color_line.png">
                    </div>
                    <div class="shape">
                        <ul></ul>
                    </div>
                </div>
                <div id="ELayer_%id%" class="menuProperties">
                    <div class="legend clearfix">
                        <span>Groups</span>
                        <img src="./images/icons/color_fill.png">
                        <img src="./images/icons/color_line.png">
                    </div>
                    <div class="shape">
                        <ul></ul>
                    </div>
                </div>
                <div id="SLayer_%id%" class="menuProperties">
                    <div class="legend clearfix">
                        <span>Groups</span>
                        <img src="./images/icons/color_fill.png">
                        <img src="./images/icons/color_line.png">
                    </div>
                    <div class="shape">
                        <ul></ul>
                    </div>
                </div>
                <div id="WLayer_%id%" class="menuProperties">
                    <div class="legend clearfix">
                        <span>Groups</span>
                        <img src="./images/icons/color_fill.png">
                        <img src="./images/icons/color_line.png">
                    </div>
                    <div class="shape">
                        <ul></ul>
                    </div>
                </div>
            </li>
        </div>
        <div id="group">
            <li id="group_%id%">
                <div class="group_properties clearfix">
                    <span class="position">%position%</span>
                    <a data-action="group:EditFillColor:%id%" title="Edit fill color" class="fill_color" style="background-color:%color_fill%"></a>
                    <a data-action="group:EditStrokeColor:%id%" title="Edit stroke color" class="stroke_color" style="background-color:%color_line%"></a>
                    <a data-action="group:EditPoints:%id%" title="Edit points" class="groupAction edit_points"></a>
                    <a data-action="group:HideShow:%id%" title="Show/Hide group" class="groupAction hide_show"></a>
                    <a data-action="group:Move:%id%" title="Move" class="groupAction move_vert"></a>
                </div>
                <ul class="group_points" id="group_%id%_instructions"></ul>
            </li>
        </div>
        <div id="instruction">
            <li id="group_%id%_%pos%">
                <div class="instruction_type"><a data-action="group:DeletePoint:%pos%" title="Supprimer ce point" class="delete_point"></a>%type%</div>
                <div class="insctruction_properties">%properties%</div>
            </li>
        </div>
    </div>
    <div id="jqueryWindow"></div>
</body>
</html>